import { NPopconfirm, NSwitch, NSpace, NButton } from 'naive-ui';
import Permisstion from '@/components/permission/index.vue';

export const getColumns = ({ enableOrEnable, openDialog, handleUser, handleDeleteRole }: any) => {
  return [
    {
      type: 'selection',
      width: 50,
      align: 'center',
    },
    {
      title: '角色编号',
      key: 'roleId',
      align: 'center',
      width: 80,
    },
    {
      title: '角色名称',
      key: 'roleName',
      align: 'center',
      ellipsis: { tooltip: true },
    },
    {
      title: '权限字符',
      key: 'roleKey',
      align: 'center',
      ellipsis: { tooltip: true },
    },
    {
      title: '显示顺序',
      key: 'roleSort',
      align: 'center',
      width: 100,
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      render: (row: any) => (
        <Permisstion hasPermi={['system:role:edit']}>
          <NPopconfirm
            onPositiveClick={() => enableOrEnable(row)}
            v-slots={{
              trigger: () => (
                <NSwitch
                  value={row.status}
                  unchecked-value="1"
                  checked-value="0"
                  size="small"
                  loading={row.switchLoading}
                ></NSwitch>
              ),
            }}
          >
            确定要
            {row.status === '0' ? '停用' : '启用'}
            {row.roleName}角色吗？
          </NPopconfirm>
        </Permisstion>
      ),
    },
    {
      title: '创建时间',
      key: 'createTime',
      align: 'center',
      width: 200,
    },
    {
      title: '操作',
      key: 'actions',
      width: 220,
      render: (row: any) => (
        <NSpace>
          <Permisstion hasPermi={['system:role:edit']}>
            <NButton text type="primary" size="tiny" onClick={() => openDialog(row)}>
              修改
            </NButton>
          </Permisstion>
          <Permisstion hasPermi={['system:role:edit']}>
            <NButton text type="primary" size="tiny" onClick={() => handleUser(row)}>
              分配用户
            </NButton>
          </Permisstion>
          <Permisstion hasPermi={['system:role:remove']}>
            <NPopconfirm
              positiveText="确定"
              negativeText="取消"
              onPositiveClick={async () => {
                row.deleteLoading = true; // 确定按钮loading
                await handleDeleteRole(row);
                row.deleteLoading = false;
              }}
              positive-button-props={{
                loading: row.deleteLoading,
              }}
              v-slots={{
                trigger: () => (
                  <NButton text type="error" size="tiny">
                    删除
                  </NButton>
                ),
              }}
            >
              确定删除该角色吗？
            </NPopconfirm>
          </Permisstion>
        </NSpace>
      ),
    },
  ];
};
